<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
		<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="lib/jquery.tools.js"></script>	
		<script type="text/javascript" src="lib/jquery.custom.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="main">
<!-- header begins -->
<div id="header">
	<div id="logo">
    	<a href="#">metamorph_melancholy</a>
      	<h2><a href="#" id="metamorph">Small Company Slogan Goes Here</a></h2>
    </div>
    <div id="buttons">
      <a href="index.html" class="but"  title="">Home</a>
      <a href="about_us.html" class="but" title="">About Us</a>
      <a href="gallery.html"  class="but" title="">Gallery</a>
      <a href="blog.html"  class="but" title="">Blog</a>
      <a href="contact_us.html" class="but" title="">Contact us</a>
    </div>
</div>
<!-- header ends -->

<!-- content begins --> 

  <div id="content">
    		
			<div class="scrollable">
				<div class="items">
					<div class="item">
						<div class="header1"></div>                                    
					</div> <!-- item -->
					<div class="item">
					    <div class="header2"></div>						
					</div> <!-- item -->
					<div class="item">
					    <div class="header3"></div>						
					</div> <!-- item -->			
											
					
				</div> <!-- items -->
			</div> <!-- scrollable -->
			<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->		   
			  
                <div style="clear: both"></div>
			
		
            
            <div style="height:10px"></div>
            <div style="padding: 0px 0px 0px 13px;">
           	  <div class="home_box">
               	  <h3>Your Options</h3>
                    <div style="height:10px"></div>
                	<img src="images/img11.jpg" class="img_l" alt="" /><b>Cras hendrerit est nec libero ornare sagittis. </b><br /><br />

				a mauris suscipit porta aliquet turpis interdum. Donec eget nisi id            </div>
            	<div class="razd_col"></div>
                <div class="home_box">
                	<h3>Company News </h3>
                  <div style="height:10px"></div>
                	<img src="images/img12.jpg" class="img_l" alt="" /><b>Donec interdum dignissim risus et vestibulum.</b><br />
					Donec eget nisi id magna tempor laoreet. Etiam egesa mauris suscipit porta aliquet turpis inter- dum. Donec eget nisi id magna
					<div style="height:10px"></div>
                    
                </div><div class="razd_col"></div>
                <div class="home_box">
                	<h3>Have a Question?</h3>
                  <div style="height:10px"></div>
                	<img src="images/img13.jpg" class="img_l" alt="" /><b>Cras hendrerit est nec libero ornare sagittis. </b><br />
					Donec interdum dignissim risus et vestibulum.<br /><br />
					a mauris suscipit porta aliquet turpis interdum. Donec eget nisi id
                    
                </div>
           	  <div style="clear: both;"></div> 
            </div>
            <div style="height:10px"></div>
            
            <div style="border: 1px solid #666666;">
            	<div class="ram">
                  <h1>Some Company Header Goes Here</h1>
                  	<div style="height:5px"></div>
                  <b>Cras hendrerit est nec libero ornare sagittis.</b><br />
					Donec interdum dignissim risus et vestibulum.  Aenean convallis ipsum a mauris suscipit porta aliquet turpis interdum. Donec eget nisi id magna tempor laoreet. Etiam egestas pulvinar nunc, eu dictum est sagittis vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer turpis est, vulputate at cursus a, suscipit quis diam. Cras condimentum metus ut neque lobortis condimentum. Aenean ornare turpis eget sapien venenatis sodales nec vitae sem. Lorem ipsum dolor sit 
                	<div style="height:20px">
                        <a href="#" class="read read_bg2">read more...</a>
                    </div> 
                
                </div>
            </div>
            <div style="height:20px"></div>
            
            
            <div>
            	<div style=" float: left; width: 430px;">
                	<h1>Pellentesque et dui lectus, quis tempus lorem</h1>
                    <div style="height:15px"></div>
            	  <img src="images/img14.jpg" class="img_l" alt="" />
            	  <div style=" width: 210px; float:right">
                  	<ul class="spis">
                        <li><a href="#">Donec luctus luctus faucibus. </a></li>
                        <li><a href="#">Mauris venenatis arcu vel urna</a></li>
                        <li><a href="#">Morbi mi sapien, malesuada</a></li>
                        <li><a href="#">Condimentum id, mattis eu </a></li>
                        <li><a href="#">Sed non dui vel ipsum gravida </a></li>
                        <li><a href="#">Nulla imperdiet, nibh gravida</a></li>
                    </ul>
                  </div>
            	</div>
                <div class="razd_col" style="width: 80px"></div>
              <div style=" float: left; width: 195px;  ">
              	<div style="height:35px"></div>
              	<b>Donec luctus luctus faucibus.</b><br />
				Mauris venenatis arcu vel urna imperdiet vitae malesuada urna aliquet. Morbi mi sapien, malesuada nec condimentum id, mattis eu lacus. Sed non dui vel ipsum
              </div>
              <div class="razd_col" style="width: 80px"></div>
              <div style=" float: left; width: 190px;  ">
              	<div style="height:35px"></div>
                <b>Sed non dui vel ipsum gravida</b> ultricies. Nulla imperdiet, nibh gravida placerat accumsan, elit turpis dictum metus, nec euismod justo diam vitae ipsum. 
              </div>
              
              
              
            	<div style="clear: both"></div>
    </div>
            
            
            
        <div style="clear: both; height: 12px;"></div>                  
  </div>
        <!-- content ends -->
<div style="height: 7px;"></div> 
        <!-- bottom begin -->
<div class="cont_top"></div>
    <div id="bottom">
    <div class="bottom_h2">	
    <div class="bottom_razd">   
        <div class="b_col1">
            <h2>Contact Information</h2>
            <div style="height:25px"></div>
            <b>Suspendisse rutrum interdum lacinia.</b> Suspendisse tempus aliquet elit sit amet pellen- tesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. Morbi id magna ac tortor <br />
            <br />
            <b>Quisque luctus, mi ornare</b> Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo    
      </div>
        <div class="b_col2">
            <h2>Share with Others</h2>
            <div style="height:25px"></div>
            <ul>
                <li><img src="images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
                <li><img src="images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
                <li><img src="images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
                <li><img src="images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
            </ul>
        </div>
      <div class="b_col3">
            <h2>Useful Resources</h2>
            <div style="height:25px"></div>
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas in turpis </a></li>
                <li><a href="#">Morbi fringilla libero</a></li>
                <li><a href="#">In venenatis metus vel </a></li>
                <li><a href="#">Donec cursus quam ac </a></li>
            </ul>
      </div> 
      <div style="clear: both; height:1px;"></div>
    </div>  
    </div>
    </div>
 
    
<!-- bottom end --> 
<!-- footer begins -->
            <div id="footer">
          Copyright  2011. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a><br />
                <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></div>
        <!-- footer ends -->
</div>



</body>
</html>
